<template>
  <div style="margin-top: 40px">
    <a-form
      :model="recordData"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="病状"
        name="symptom"
        :rules="[{ required: true, message: '请输入病状！' }]"
      >
        <a-input
          v-model:value="recordData.symptom"
          placeholder="请输入用户病状"
        />
      </a-form-item>

      <a-form-item
        label="不适症状描述"
        :rules="[{ required: true, message: '请输入不适症状描述！' }]"
        name="descriptions"
      >
        <a-textarea
          v-model:value="recordData.descriptions"
          placeholder="请输入不适症状描述！"
          :rows="3"
        />
      </a-form-item>

      <!-- 是否发烧 -->
      <a-form-item label="是否发烧">
        <div class="isFever">
          <a-switch
            v-model:checked="recordData.isFever"
            checked-children="是"
            un-checked-children="否"
            style="margin-right: 20px"
          />
          <a-input-number
            style="width: 120px; margin-top: -6px"
            v-show="recordData.isFever"
            v-model:value="recordData.degree"
            addon-after="°C"
          ></a-input-number>
        </div>
      </a-form-item>

      <a-form-item label="是否流行病" name="isEpidemic">
        <a-switch
          v-model:checked="recordData.isEpidemic"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>

      <a-form-item label="是否并发症" name="isComplication">
        <a-switch
          v-model:checked="recordData.isComplication"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>

      <a-row>
        <a-col :span="6"></a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6">
          <div class="btn_box">
            <a-button
              html-type="submit"
              style="margin-right: 20px; background-color: #b83b5e"
              type="primary"
              >下一步</a-button
            >
          </div>
        </a-col>
        <a-col :span="6"></a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'

import { userUserStore } from '@/stores/UserStore'
import { userConsuliation } from '@/stores/ConsulitationStore'
import { message } from 'ant-design-vue'

const stepsStore = userConsuliation()

const store = userUserStore()
const userInfo: any = ref({})
const recordData = ref({
  symptom: '',
  descriptions: '',
  isFever: false,
  isEpidemic: false,
  isComplication: false,
  degree: null,
})

const onFinish = () => {
  if (recordData.value.isFever && !recordData.value.degree) {
    return message.error('请填入度数')
  }
  stepsStore.oneNext(recordData.value)
}

watch(
  stepsStore.getCurrent,
  () => {
    // 只要步骤为4了表示完成了然后清空本页数据
    if (stepsStore.getCurrent() == 4) {
      recordData.value = {
        symptom: '',
        descriptions: '',
        isFever: false,
        isEpidemic: false,
        isComplication: false,
        degree: null,
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
)

onMounted(() => {
  userInfo.value = store.employeeInfo
})
</script>

<style lang="less" scoped>
.btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.description {
  display: flex;
  box-sizing: border-box;
  padding: 6px 0;
  height: 50px;
}
</style>
